<template>
  <div class="avarto">
    <div v-for="(item, index) in data" :key="index" class="avatar-item">
      <div
        class="nav"
        :class="{
          // selected: index === selectedIndex,
          // selected: index === selectedIndex && item.isRight,
          // selectederror: index === selectedIndex && !item.isRight
        }"
        @click="getImageInfor(item, index)"
      >
        <img :src="item.image" alt="" />
      </div>
      <el-input 
        v-model="item.name"
        @blur="handleInput($event, index)"
        class="name-input"
        placeholder="请输入姓氏"
      ></el-input>
    </div>
  </div>
</template>

<script>
export default {
  props: ["imageData", "popQuList", "isState"],
  data() {
    return {
      data: [...this.imageData],
      selectedIndex: null, // 用于存储当前选中的头像索引
    };
  },
  methods: {
    handleInput(event, index) {
      const value = event.target.value;
      if(value) {
        this.selectedIndex = index;
        const params = {
          name: value,
          job: "",
          address: "",
          content: "",
        };
        this.$emit("save", this.popQuList[index]);
        this.$emit("onSubmit", params);
      }
    },

    getImageInfor(item, index) {
      this.selectedIndex = index; // 设置选中索引
      this.$emit("onState", true);
      this.$emit("save", this.popQuList[index]);
      // if(item.isRight){
      //   this.$message({
      //     message:"恭喜你选择正确！",
      //     type:"success",
      //     center:true
      //   })
      // }else{
      //   this.$message({
      //     message:"很遗憾，选择错误！",
      //     type:"error",
      //     center:true
      //   })
      // }
    },
  },
  watch: {
    imageData: {
      handler(newVal) {
        this.data = newVal;
      },
      deep: true,
      immediate: false,
    },
    popQuList: {
      handler(newVal) {
        this.popQuList = newVal;
      },
      deep: true,
      immediate: false,
    },
    isState: {
      handler(newVal) {
        if (!newVal) {
          this.selectedIndex = null;
        }
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.avarto {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(8, minmax(150px, 1fr));
  gap: 20px;
  padding: 20px;

  .avatar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }

  .nav {
    width: 200px;
    height: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
    // border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    background: white;
    cursor: pointer;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    }

    img {
      // width: 10px;
      width: auto;
      height: 160px;
      // border-radius: 50%;
      object-fit: cover;
    }

    &.selected {
      border: 3px solid #4caf50;
      box-shadow: 0 0 15px rgba(76, 175, 80, 0.6);
      animation: pulse 1.5s infinite;
    }

    &.selectederror {
      border: 3px solid #f44336;
      box-shadow: 0 0 15px rgba(244, 67, 54, 0.6);
      animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
    }
  }

  .name-input {
    width: 200px;
    :deep(.el-input__inner) {
      text-align: center;
      border-radius: 20px;
    }
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  20%, 60% {
    transform: translateX(-5px);
  }
  40%, 80% {
    transform: translateX(5px);
  }
}
</style>
